<template>
  <!-- 面包屑导航 -->
    <div style="margin-top: 20px; margin-left: 20px">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item><b>审批</b></el-breadcrumb-item>
            <el-breadcrumb-item>课程审批</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
  <!-- 课程安排表格 -->
    <div class="table-container">
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="courseNumber" label="课程号" />
            <el-table-column prop="course" label="课程名" />
            <el-table-column prop="teacherName" label="教师姓名" />
            <el-table-column prop="location" label="上课地点" />
            <el-table-column prop="startTime" label="开始时间" />
            <el-table-column prop="endTime" label="结束时间" />
            <el-table-column prop= "state" label="状态" >
                <template #default="scope">
                    <el-button
                            :type="getButtonType(scope.row)"
                            :disabled="scope.row.state === 0 || scope.row.state === 1 ||scope.row.state === 2 ||scope.row.state === 3"
                    >
                        {{ getButtonText(scope.row) }}
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button
                            type="success"
                            @click="passUpdateCourse(scope.row)"
                    >
                        通过
                    </el-button>
                    <el-button
                        type="danger"
                        @click="rejectUpdateCourse(scope.row)"
                    >
                        拒绝
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 分页按钮 -->
    <div class="demo-pagination-block">
        <el-pagination
            v-model:current-page="pagination.currentPage"
            v-model:page-size="pagination.pageSize"
            :page-sizes="[5, 10, 15, 20]"
            :total="pagination.total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
    </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import request8090 from "../../../../utils/request8090.js";
import {ElMessage} from "element-plus";
import {ArrowRight} from "@element-plus/icons-vue";

const tableData = ref([]);

onMounted(() => {
    getCourseChangeInfo()
});
// 获取课程审核列表
const getCourseChangeInfo = () => {
    request8090({
        url: '/admin/getupdatecourse',
        method: 'GET',
        params: {
            currentPage: pagination.value.currentPage,
            size: pagination.value.pageSize,
        },
    })
        .then(res => {
            if (res.data.errorCode === 200) {
                tableData.value = res.data.data.records;
                pagination.value.total = res.data.data.total;
            } else {
                ElMessage.error('获取数据失败');
            }
        })
        .catch(error => {
            console.error('请求失败:', error);
            ElMessage.error('请求失败');
        });

}
//初始化的默认分页大小
const pagination = ref({
    currentPage: 1,
    pageSize: 10,
    total: 0
});
//显示行数大小改变时刷新页面
const handleSizeChange = (size) => {
    pagination.value.pageSize = size;
    getCourseChangeInfo();
}
//显示页数改变时刷新页面
const handleCurrentChange = (page) => {
    pagination.value.currentPage = page;
    getCourseChangeInfo();
}
// 按钮的字体显示
const getButtonText = (row) => {
    if (row.state === 1) {
        return '已通过';
    } else if (row.state === 0) {
        return '添加申请';
    } else if (row.state === 2) {
        return '已拒绝';
    }else {
        return '调整申请';
    }
}
//改变按钮状态
const getButtonType = (row) => {
    if (row.state === 1) {
        return 'success';
    } else if (row.state === 2) {
        return 'danger';
    } else if (row.state === 0) {
        return 'primary';
    }else {
        return 'warning'
    }
}

// 通过操作
const passUpdateCourse = (row) => {
    updateCourseState(row, 1);
};

// 拒绝操作
const rejectUpdateCourse = (row) => {
    updateCourseState(row, 2);
};

// 更新课程状态
const updateCourseState = (row, state) => {
    request8090({
        url: "/admin/checkInsertCourse",
        method: "put",
        params: {
            id: row.id,
            state: state,
            courseNumber: row.courseNumber
        }
    })
        .then(res => {
            if (res.data.errorCode === 200) {
                ElMessage.success("操作成功");
                getCourseChangeInfo();
            } else {
                ElMessage.error("操作失败");
            }
        })
        .catch(error => {
            console.error("请求失败:", error);
            ElMessage.error("请求失败");
        });
};
</script>

<style scoped>

</style>